<script>

export default {
  name: 'WelcomeView',
  data () {
    return {
      roleChange: 1,
      timeChange: 1,
      userChange: 1,
      selectDisabled: false,
      isLoading: true,
      countData: {},
      pieOption: {
        title: {
          text: '博客分类占比图',
          subtext: '实时数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c}({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '博客分类',
            type: 'pie',
            radius: '50%',
            data: [{
              name: 'HTML',
              value: 15
            }, {
              name: '穿越',
              value: 48
            }, {
              name: 'JAVA',
              value: 22
            }]
          }
        ]
      },
      barOption: {
        title: {
          text: '博客年度数据总结',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['2008', '2009', '2010']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'bar',
          data: [33, 55, 28]
        }, {
          type: 'line',
          data: [33, 55, 28]
        }]
      }
    }
  },
  watch: {
    roleChange () {
      this.getCountData()
    },
    timeChange () {
      this.getCountData()
    },
    userChange () {
      this.getBarOption()
      this.getPieOption()
    }
  },
  methods: {
    getLoginInfo () {
      this.$axios.get('info').then(data => {
        this.isLoading = false
        if (data.roleId === 2) {
          this.roleChange = 2
          this.userChange = 2
          this.selectDisabled = true
        }
      }).catch(e => e)
    },
    getCountData () {
      this.$axios.get('echarts/count', { params: { roleChange: this.roleChange, timeChange: this.timeChange } }).then(data => {
        this.countData = { ...data }
      }).catch(e => e)
    },
    getBarOption () {
      this.$axios.get(`echarts/bar/${this.userChange}`).then(data => {
        data = data.sort((o1, o2) => o1.name - o2.name)
        this.barOption.xAxis.data = data.map(item => item.name)
        this.barOption.series[0].data = data.map(item => item.count)
        this.barOption.series[1].data = data.map(item => item.count)
      })
    },
    getPieOption () {
      this.$axios.get(`echarts/pie/${this.userChange}`).then(data => {
        this.pieOption.series[0].data = data.map(item => {
          return {
            name: item.name,
            value: item.count
          }
        })
      })
    }
  },
  created () {
    this.getLoginInfo()
    this.getCountData()
    this.getBarOption()
    this.getPieOption()
  }
}
</script>

<template>
<el-card v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
  <el-card>
    <div class="card-title" slot="header">
      <span class="title">统计数据{{$store.state.roleId}}</span>
      <el-form label-width="80px" inline>
        <el-form-item class="form-item" label="用户选择">
          <el-select :disabled="selectDisabled" v-model="roleChange">
            <el-option :value="1" label="全部用户"/>
            <el-option :value="2" label="当前用户"/>
          </el-select>
        </el-form-item>
        <el-form-item class="form-item" label="时间选择">
          <el-select v-model="timeChange">
            <el-option :value="1" label="全部时间"/>
            <el-option :value="2" label="今天"/>
            <el-option :value="3" label="最近一周"/>
            <el-option :value="4" label="最近一个月"/>
            <el-option :value="5" label="最近三个月"/>
            <el-option :value="6" label="最近半年"/>
            <el-option :value="7" label="最近一年"/>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col :span="4">
        <el-card>
          博客总数：{{ countData.blogCount }}
        </el-card>
      </el-col>
      <el-col :span="4" :offset="1">
        <el-card>
          评论总数：{{countData.commentCount}}
        </el-card>
      </el-col>
      <el-col :span="4" :offset="1">
        <el-card>
          分类总数：{{countData.categoryCount}}
        </el-card>
      </el-col>
      <el-col :span="4" :offset="1">
        <el-card>
          标签总数：{{countData.tagCount}}
        </el-card>
      </el-col>
      <el-col v-if="roleChange === 1" :span="4" :offset="1">
        <el-card>
          用户总数：{{countData.userinfoCount}}
        </el-card>
      </el-col>
    </el-row>
  </el-card>
  <el-card>
    <div class="card-title" slot="header">
      <span class="title">图表数据</span>
      <el-form label-width="80px" inline>
        <el-form-item class="form-item" label="用户选择">
          <el-select :disabled="selectDisabled" v-model="userChange">
            <el-option :value="1" label="全部用户"/>
            <el-option :value="2" label="当前用户"/>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col :span="12" style="height: 400px;">
        <v-chart :option="barOption"></v-chart>
      </el-col>
      <el-col :span="12" style="height: 400px;">
        <v-chart :option="pieOption"></v-chart>
      </el-col>
    </el-row>
  </el-card>
</el-card>
</template>

<style scoped lang="scss">
.card-title{
  display: flex;
  justify-content: space-between;
  .title{
    display: flex;
    align-items: center;
  }
  .form-item{
    margin-bottom: 0;
  }
}
</style>
